<template>
  <div class="content">
    <div class="user-info">
      <img :src=userInfo.avatarUrl>
      <div>你好，{{userInfo.nickName}}</div>
    </div>

    <div class="setting-list">
      <div class="item-l">
        <i class='icon mt-my-location-o'></i>
        <span class="title">我的收货地址</span>
      </div>

      <div class="item-l">
        <i class='icon mt-customer-service-o'></i>
        <span class="title">意见反馈</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: []
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      var that = this;
      console.log("start get user info");
      wx.getUserInfo({
        success: res => {
          this.userInfo = res.userInfo;
        }
      });
    }
  }
};
</script>

<style lang="less">
.content {
  background: whitesmoke;
  width: 100%;
  height: 100%;
}
.user-info {
  padding: 16rpx;
  text-align: center;
  background-color: white;
  img {
    height: 148rpx;
    width: 148rpx;
    border-radius: 50%;
  }
  div {
    margin-top: 32rpx;
  }
}

.setting-list {
  margin-top: 30rpx;
  padding-left: 50rpx;
  padding-right: 50rpx;
  padding-top: 30rpx;
  padding-bottom: 30rpx;
  background: white;
  .item-l {
    display: flex;
    flex: 1;
    align-items: center;
    border-bottom: 2rpx solid whitesmoke;
    padding: 15rpx;
    i {
      font-size: 48rpx;
      color: darkgray;
    }
    .title {
      font-size: 30rpx;
      color: black;
      margin-left: 30rpx;
      margin-top: 6rpx;
    }
    .amount {
      font-size: 38rpx;
      color: red;
      margin: 0 10rpx;
      display: flex;
      align-items: center;
      span {
        font-size: 38rpx;
        color: darkgray;
        margin-left: 10rpx;
      }
    }
  }
}
</style>

